<template>
  <div>
    <div class="work-log">
      <div class="work-log-item">
        <div>
          <div class="title">{{ $t('projectManage.setting.workLog.tip1') }}</div>
          <div class="tip">{{ $t('projectManage.setting.workLog.tip2') }}</div>
        </div>

        <el-switch v-model="switchValue" :active-value="true" :inactive-value="false" @change="changeStatus"></el-switch>
      </div>

      <div class="work-log-item">
        <div>
          <div class="title">{{ $t('projectManage.setting.workLog.tip3') }}</div>
          <div class="tip">{{ $t('projectManage.setting.workLog.tip4') }}</div>
        </div>
        <div>
          <el-button type="primary" @click="handleClickFieldDesign">{{ $t('projectManage.setting.workLog.tip5') }}</el-button>
        </div>
      </div>
    </div>
    <!-- 表单配置弹框 -->
    <WorkLogFieldDesign ref="workLogFieldRef" :templateId="templateId" />
  </div>
</template>
<script>
import { reactive, toRefs, ref, onMounted } from 'vue';
import WorkLogFieldDesign from './WorkLogFieldDesign.vue';

import { getWorkRecord, updateWorkRecord } from '@src/api/ProjectManage.ts';
import { toast } from '@src/util/platform';

import i18n from '@src/locales';

export default {
  name: 'work-log',
  components: {
    WorkLogFieldDesign,
  },
  props: {
    templateId: {
      type: String | Number,
      default: '',
    },
  },
  setup(props) {
    const workLogFieldRef = ref();

    const state = reactive({
      switchValue: '',
    });

    // 表单配置
    const handleClickFieldDesign = () => {
      workLogFieldRef.value.open();
    };

    // 获取状态
    const fetchWorkLogStatus = () => {
      getWorkRecord({
        templateId: props.templateId,
      }).then(res => {
        const { success, data } = res;
        if (!success) return toast(message, 'error');
        state.switchValue = data?.status;
      });
    };

    const changeStatus = val => {
      updateWorkRecord({
        templateId: props.templateId,
        config: {
          status: val,
        },
      }).then(res => {
        const { success, data } = res;
        if (!success) return toast(message, 'error');
        toast(i18n.t('common.base.tip.updateSuccess'), 'success');
      });
    };

    onMounted(() => {
      fetchWorkLogStatus();
    });

    return {
      workLogFieldRef,
      ...toRefs(state),
      handleClickFieldDesign,
      changeStatus,
    };
  },
};
</script>
<style lang="scss" scoped>
.work-log {
  padding: 24px;
  &-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    .title {
      position: relative;
      font-family: PingFangSC-Medium, PingFang SC;
      font-size: 14px;
      color: #333;
      margin-bottom: 4px;

      &::before {
        background: $color-primary-light-6;
        border-radius: 2px;
        content: '';
        display: inline-block;
        height: 14px;
        left: -8px;
        position: absolute;
        top: 2px;
        width: 2px;
      }
    }
    .tip {
      font-size: 12px;
      color: #999;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>